<template>
  <div class="login">
    <!-- 头部 -->
    <header>
      <div class="h-left">
          <router-link to="/home"
          ><img src="../../assets/image/18721.png" style="width: 8px"
        /></router-link>
      </div>
      <div class="h-title">请先登录</div>
      <div class="h-right" style="margin-right: 11px">
        <!-- <router-link class="book" >注册</router-link> -->
      </div>
    </header>

    <form id="outer">
      <van-tabs v-model="active" color="#f54b41">
        <van-tab v-for="item in login" :key="item.id" :title="item.name">
          <div id="content">
            <div class="loginForm">
              <div class="box_in">
                <label
                  ><input
                    id="username"
                    type="text"
                    :placeholder="item.phonename"
                    v-model="phone"
                /></label>
              </div>
              <div class="box_in">
                <label
                  ><input
                    id="password"
                    :type="typePwd"
                    :placeholder="item.title"
                    autocomplete="off"
                    v-model="password"
                /></label>
                <span
                  class="iconfont icon-lolyanjing1 eye"
                  :class="flag == true ? 'con' : ''"
                  @click="showPwd()"
                ></span>
              </div>
              <div class="captchaEle">
                <div class="box_in">
                  <label
                    ><input
                      v-model="code"
                      id="passwordCaptcha"
                      type="text"
                      placeholder="输入右图文字"
                  /></label>
                </div>
                <div class="completely">
                  <img class="captcha" :src="item.img + '?param=100y100'" />
                </div>
              </div>
            </div>
            <!-- <div class="login_red_btn" @click="toToast">登录</div> -->
            <div class="login_red_btn" @click="submit">登录</div>
          </div>
        </van-tab>
      </van-tabs>

      <!-- 登录框 -->

      <div class="qita"><span>其他登录方式</span></div>
    </form>
    <div class="other_ico">
      <div>
        <img
          onclick="location.href='http://auth.platform.zongheng.com/oauth?api=qq&amp;backUrl=http%3A%2F%2Fwww.xmkanshu.com%2Fbookshelf%3Ffr%3Dsmsstg%26urbid%3D%252F_6_0%26logintype%3Dqq&amp;appid=1&amp;fr=smsstg'"
          src="https://img.xmkanshu.com/operateimg/novel/2c/2cbec928cdab86d1069681dd2984f986.png"
        />
      </div>
      <div>
        <img
          onclick="location.href='http://auth.platform.zongheng.com/oauth?api=weibo&amp;backUrl=http%3A%2F%2Fwww.xmkanshu.com%2Fbookshelf%3Ffr%3Dsmsstg%26urbid%3D%252F_6_0%26logintype%3Dweibo&amp;appid=1&amp;fr=smsstg'"
          src="https://img.xmkanshu.com/operateimg/novel/a1/a13503b83914908034937639d860e223.png"
        />
      </div>
      <div>
        <img
          onclick="location.href='http://auth.platform.zongheng.com/oauth?api=baidu&amp;appid=1&amp;fr=0&amp;backUrl=http%3A%2F%2Fwww.xmkanshu.com%2Fbookshelf%3Ffr%3Dsmsstg%26urbid%3D%2F_6_0%26logintype%3Dbaidu%26lfr%3D2'"
          src="https://img.xmkanshu.com/operateimg/novel/bc/bcb1c59ac31201b2ed13f42f3c9dd28c.png"
        />
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div style="font-size: 13px; color: #c1c1c1; padding-top: 20px">
        客服
        <a
          href="tel:4006289988"
          style="font-size: 13px; color: #c1c1c1; padding-top: 20px"
          >400-628-9988</a
        >
      </div>

      <div class="foot-app">
        <a href="#">极速版</a>
        <a href="#" class="con">触屏版</a>
        <a href="#">客户端</a>
      </div>
      <div class="foot_panda">© 2022 熊猫看书</div>
      <div class="foot_panda" id="icpbei">京ICP备 11009265号-5</div>
    </div>

    <div class="agree">
      登录代表您同意熊猫看书
      <a href="/help/protocol?fr=smsstg&amp;urbid=/_6_0">用户协议</a>和
      <a href="/help/privacy?fr=smsstg&amp;urbid=/_6_0">隐私策略</a>
    </div>
  </div>
</template>

<script>
import { getLogin } from "../../api/home.js";
export default {
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      active: 0,
      login: null,
      typePwd: "password",
      accout: "",
      flag: false,
    };
  },
  methods: {
    submit() {
      console.log(this);
      // 验证手机号码与密码
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 2.验证密码
      let pass = /^[a-zA-Z0-9]\w{8,17}$/;
      // 3.验证码
      let code = /^[A-Za-z0-9]{4}$/;
      if (
        !reg.test(this.phone) ||
        !pass.test(this.password) ||
        !code.test(this.code)
      ) {
        this.$toast("请输入正确手机号码与密码");
        return;
      }
      // if(!code.test(this.code)){//不正确处理
      //     this.$toast("请输入正确手机号码与密码");
      //     return;
      // }
      console.log("成功登录");

      // 假数据登录
      localStorage.setItem("token", "13421722866");
      localStorage.setItem("userId", "lin12345678");
      localStorage.setItem("code", "AX35");
      // console.log("userId");
      // console.log("token");
      // console.log("codeId");
      this.$toast("登陆成功");
      this.$router.push("/personal");
    },
    getLoginFun() {
      getLogin().then((data) => {
        this.login = data.login;
        console.log(this.login);
      });
    },

    showPwd() {
      this.typePwd = this.typePwd === "password" ? "text" : "password";
      if (this.flag == false) {
        this.flag = true;
        console.log(1);
      } else {
        this.flag = false;
      }
    },
  },
  created() {
    this.getLoginFun();
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #fff;
  .login_tab {
    display: flex;
    height: 50px;
    margin: 5px 10px 0 10px;
    & > li {
      line-height: 50px;
      width: 50%;
      text-align: center;
      border-bottom: 2px #e4e4e4 solid;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .dl {
        font-size: 15px;
        margin-right: 20px;
      }
      &.active {
        color: #f54b41;
        border-bottom: 2px #f54b41 solid;
      }
    }
  }

  .iconfont {
    font-size: 22px;
    margin-left: 10px;
  }
  .box_in {
    height: 36px;
    border: 1px #999 solid;
    padding: 0 15px;
    margin: 18px 10px 0 10px;
    background: #fff;
    position: relative;
    flex: 1;
    label {
      display: block;
      input {
        width: 100%;
        border: none;
        font-size: 15px;
        line-height: 18px;
        margin-top: 10px;
        outline: none;
      }
    }
  }
  .eye {
    position: absolute;
    right: 0;
    top: 8px;
    margin-right: 20px;
    &.con {
      color: #f54b41;
      border-bottom: none;
    }
  }
  .completely {
    width: 120px;
    height: 36px;
    border: 1px #999 solid;
    margin-top: 18px;
    margin-right: 10px;
    img {
      width: 100%;
      display: block;
    }
  }
  .login_red_btn {
    height: 36px;
    background: #f54b41;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 36px;
    margin: 18px 10px 0 10px;
  }
  .flex {
    -webkit-box-flex: 1;
  }
  .captchaEle {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .qita {
    margin: 40px 10px 0 10px;
    border-bottom: 1px #d4d4d5 solid;
    position: relative;
    span {
      display: block;
      font-size: 13px;
      color: #5f5f5f;
      background: #fff;
      padding: 0 10px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      top: -9px;
    }
  }
  .other_ico {
    display: flex;
    justify-content: space-around;
    padding: 25px 20px 10px 20px;
    & > div {
      img {
        width: 40px;
        height: 40px;
        display: inline-block;
      }
    }
  }
  a {
    &.con {
      font-size: 14px;
      color: #000;
    }
  }
  /* 安全协议 */
  .agree {
    color: #bcbcbc;
    text-align: center;
    padding: 30px 0;
    font-size: 12px;
    & > a {
      color: #9bc2ef;
      font-size: 12px;
    }
  }
}
body {
  background-color: none;
}

::v-deep {
  .van-tab--active {
    color: #f54b41;
  }
  .van-tabs__line {
    width: 50%;
  }
  .van-tabs__nav {
    background-color: transparent;
  }
  .van-tab__text {
    font-size: 15px;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #dedede;
  }
}
</style>